<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne" name="sex" value="男" />男
        <input type="radio" id="sexTwo" checked name="sex" value="女" />女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px">
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll">全选
                    <input type="checkbox" class="selectOther">反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>

    </table>
    <script>
        var selectAll = document.querySelector(".selectAll");
        var selectOther = document.querySelector(".selectOther");
        var userDom = document.querySelectorAll(".user");
        // console.log(userDom);
        var selectDom = document.querySelectorAll("input");

        // 全选 取消checked，全部取消
        selectAll.onclick = function () {
            userDom.forEach(item => {
                item.checked = this.checked;
                // console.log(this);

            })
        }
        // 当所有的userDom全部选中，全选按钮自动checked
        userDom.forEach(item => {
            item.onclick = function () {
                // 如果当前被勾选的user个数与 user个数相同 就证明全选
            // if(document.querySelectorAll('.user').length == document.querySelectorAll('.user:checked').length){
            //     document.querySelector('.selectAll').checked = true;
            // }else{
            //     document.querySelector('.selectAll').checked = false;
            // }
                // 不论怎么写 就是为checked属性赋值 true或者false 比较长度得到的就是布尔值
                selectAll.checked = userDom.length == document.querySelectorAll('.user:checked').length
                // selectAll.checked = userDom.length == ("userDom:checked").length                                                                       
            }

        })

        // 反选
        selectOther.onclick = function () {
            userDom.forEach(item=>{
                item.checked=!item.checked;
            })
            // 反选，全选按钮取消选中
            if (selectAll.checked == true) {
            selectAll.checked = false;
        }
        }
     
        console.log(selectAll.checked);
    </script>
</body>

</html>